/*
 * @Description:
 * @Autor: zhangbing
 * @Date: 2021-06-15 15:52:24
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-06-16 10:03:26
 */

import React, { Component } from 'react'
import { nanoid } from 'nanoid'

export default class Header extends Component {
  handleKeyUp = e => {
    const { keyCode, target } = e
    if (keyCode !== 13) return
    if (target.value.trim() === '') {
      alert('输入不能为空')
      return
    }
    const todoObj = {
      id: nanoid(),
      things: target.value,
      done: false,
    }
    this.props.addToDo(todoObj)
    target.value = ''
  }
  render() {
    const { addToDo } = this.props
    return (
      <div>
        <h1>ToDoLists</h1>
        <input
          onKeyUp={this.handleKeyUp}
          type='text'
          placeholder='请输入你的任务名称，按回车键确认'
          style={{ width: '400px', height: '30px' }}
        />
      </div>
    )
  }
}
